<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 先让所有的div都一样宽高 */
    div{
      width: 100px;
      height: 100px;
    }
    /* 之后单独给每个div加背景颜色 */
    .d1{
      background-color: red;
      /* 脱离文档流的消失，完全消失但标签在，多用于鼠标移入出现的菜单 */
      display: none;
      display: block;
    }
    .d2{
      background-color: blue;
      /* 不脱离文档流，隐藏元素，但占据位置，应用不太多但可以用在头像等功能上 */
      visibility: hidden;
      visibility: visible;
    }
    .d3{
      background-color: green;
      /* 元素透明度，0为完全透明，1为完全不透，半透明0.5，取值范围0-1之间 */
      opacity: 0.5;
    }
    .d4{
      background-color: orangered;   
    }
  </style>
</head>

<body>
   <div class="d1"></div>
   <div class="d2"></div>
   <div class="d3"></div>
   <div class="d4"></div>
</body>
</html>